<!-- 表格卡片 模板页-->
<template>
  <el-card shadow="never">
    <div slot="header">
      <div class="d-flex justify-space-between align-center">
        <span class="font-weight-bold">{{ title }}</span>
        <el-button
          v-if="showAddButton"
          type="primary"
          icon="el-icon-plus"
          @click="$emit('add')"
        >
          {{ addButtonText }}
        </el-button>
      </div>
    </div>
    <!-- 过滤栏插槽 -->
    <div v-if="$slots.filter" class="filter-bar mb-4">
      <slot name="filter"></slot>
    </div>
    <el-table
      :data="items"
      :loading="loading"
      size="small"
      border
      style="width: 100%"
    >
      <el-table-column
        v-for="h in headers"
        :key="h.value || h.prop"
        :prop="h.value || h.prop"
        :label="h.text || h.label"
      />
      <!-- 传递所有插槽（保留原有结构） -->
      <template v-for="(_, name) in $slots" #[name]="slotData">
        <slot :name="name" v-bind="slotData" />
      </template>
    </el-table>
    <div class="d-flex justify-space-between align-center pt-2">
      <div>共{{ pageCount }}页-每页{{ itemsPerPage }}条记录-共{{ itemsLength }}条记录</div>
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="currentPage"
        :page-count="pageCount"
        :page-size="itemsPerPage"
        @current-change="$emit('update:page', $event)"
      />
    </div>
  </el-card>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  // 标题
  title: {
    type: String,
    required: true
  },
  // 是否显示新增按钮
  showAddButton: {
    type: Boolean,
    default: true
  },
  // 新增按钮文本
  addButtonText: {
    type: String,
    default: '新增'
  },
  // 表格数据
  items: {
    type: Array,
    required: true
  },
  // 表格列配置
  headers: {
    type: Array,
    required: true
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false
  },
  // 每页条数
  itemsPerPage: {
    type: Number,
    default: 10
  },
  // 每页条数文本
  itemsPerPageText: {
    type: String,
    default: '每页行数'
  },
  // 当前页码
  page: {
    type: Number,
    default: 1
  }
});

const emit = defineEmits(['add', 'update:page']);

// 当前页码
const currentPage = computed({
  get: () => props.page,
  set: (val) => emit('update:page', val)
});

const itemsLength = computed(() => (props.items ? props.items.length : 0));
const pageCount = computed(() => {
  const len = itemsLength.value || 0;
  const size = props.itemsPerPage || 1;
  return Math.max(1, Math.ceil(len / size));
});
</script>